<template>
  <div>
		<n-space vertical>
			<n-button type="primary" @click="api.add({ showEditProps })">
				<template #icon>
					<n-icon>
						<icon-plus />
					</n-icon>
				</template>
				添加管理员
			</n-button>
			<n-radio-group
				v-model:value="params.active"
				@update:value="getTable">
				<n-radio-button :value="true">在职</n-radio-button>
				<n-radio-button :value="false">已删除</n-radio-button>
			</n-radio-group>
		</n-space>
		<WyTable :data="{ tableData, params, columns, api, getTable }" />
		<n-modal
			style="width: 400px;"
			v-model:show="showEditProps.show"
			:title="showEditProps.title"
			preset="card"
			draggable>
			<component :is="edit" :editProps="showEditProps" :getTable="getTable" />
		</n-modal>
	</div>
</template>

<script setup lang="jsx">
import { defineAsyncComponent, defineComponent, reactive, ref } from 'vue'
import api from '@/data/admin'
import WyTable from '@@/table'
import IconPlus from '@@/icons/plus'
const params = reactive({
	pageNo: 1,
	pageSize: 10,
	active: true,
	name: ''
})
const showEditProps = reactive({
	id: null,
	title: '',
	show: false
})
const edit = defineAsyncComponent(() => import('./edit')) 
const tableData = ref(await api.getTableData(params))
const columns = api.createTableColumns({tableData, params, showEditProps})
function getTable () {
	api.upDateTable(params, tableData)
}
</script>

<style scoped lang="scss">

</style>